<!-- Place this tag in your head or just before your close body tag. -->
<header id="header" class="flex-shrink-0 d-flex align-items-center">
  <div class="container d-flex align-items-center">
    <a href="/" class="logo me-auto d-flex align-items-end">
      <img
        src="/img/icon.svg"
        alt=""
        class="img-fluid"
        height="50"
        width="50"
      />
      <h1>PRQL</h1>
    </a>

    <nav id="navbar" class="navbar navbar-expand-lg">
      <button class="navbar-toggler border-0 bg-white p-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
        <i class="bx bx-dots-horizontal-rounded fs-2"></i>
      </button>
      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbarLabel">PRQL</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <hr class="d-lg-none text-black-50">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            {{ range .Site.Menus.nav }}
              <li class="nav-item col-6 col-lg-auto py-2 px-0 px-lg-2">
                {{ print "[" .Name "]" "("  .URL ")" | markdownify }}
              </li>
            {{ end }}
          </ul>
        </div>
      </div>
    </nav>

    <div
      style="min-width: 9rem"
      class="d-flex ps-3 pt-2 justify-content-end align-items-end"
    >
      <!-- Generated from https://buttons.github.io/ -->
      <a
        class="github-button"
        href="https://github.com/PRQL/prql"
        data-size="large"
        data-show-count="true"
        aria-label="Star prql/prql on GitHub"
      >
        Star
      </a>
    </div>
  </div>
</header>
